<template>
  <div>
    <div class="infotopclass">
      <span>用户信息列表</span>
    </div>
    <el-table
        :data="currentuserinfodata"
        style="width: 100%">
        <el-table-column
        type="index"
        label="序号">
        </el-table-column>
        <el-table-column
        prop="username"
        label="用户名"
        width="180">
        </el-table-column>
        <el-table-column
          prop="user_pic"
          label="用户头像"
          width="180">
          <template slot-scope="scope">
            <img :src="scope.row.user_pic" alt="" class="cover_img" v-if="scope.row.user_pic">
            <img src="../../../assets/images/avatar.jpg" alt="" class="cover_img" v-else>
          </template>
        </el-table-column>
        <el-table-column
        prop="nickname"
        label="用户昵称"
        width="180">
        <template slot-scope="scope">
            <p v-if="scope.row.nickname">{{scope.row.nickname}}</p>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column
        prop="email"
        label="用户邮箱">
        <template slot-scope="scope">
            <p v-if="scope.row.email">{{scope.row.email}}</p>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column
        prop="usertype"
        label="用户类型">
        <template slot-scope="scope">
            <p v-if="scope.row.usertype == '管理员' "><i class="el-icon-user-solid"></i>{{scope.row.usertype}}</p>
            <p v-if="scope.row.usertype == '用户' "><i class="el-icon-user"></i>{{scope.row.usertype}}</p>
        </template>
        </el-table-column>
        <el-table-column
            label="操作"
            header-align="center"
            width="180">
            <template slot-scope="scope">
                <el-button
                size="mini"
                v-if="scope.row.usertype == '用户' " @click="changeusertypeToadminFn(scope.row.id)">设为管理员</el-button>
                <el-button
                size="mini"
                v-else @click="changeusertypeTouserFn(scope.row.id)">设为普通用户</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-if="userinfodata.length > 10"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="userinfodata.length"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import { getuserAPI, changeusertypetoadmin, changeusertypetouser, deleteuserAPI } from '@/api'
export default {
  name: 'admin-user',
  data () {
    return {
      userinfodata: [],
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  computed: {
    totalPages () {
      return Math.ceil(this.category.length / this.pageSize) // 总页数
    },
    currentuserinfodata () {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.userinfodata.slice(startIndex, endIndex)
    }
  },
  mounted () {
    // 获取用户信息
    this.getUserList()
  },
  methods: {
    // 获取全部用户信息
    async getUserList () {
      const { data } = await getuserAPI()
      if (data.status !== 0) return this.$message.error(data.message)
      this.userinfodata = data.data
    },
    // 将用户变为管理员
    async changeusertypeToadminFn (id) {
      const { data } = await changeusertypetoadmin(id)
      if (data.status !== 0) return this.$message.error('用户权限变更失败')
      this.$message.success(data.message)
      this.getUserList()
    },
    // 撤销管理员身份
    async changeusertypeTouserFn (id) {
      const { data } = await changeusertypetouser(id)
      if (data.status !== 0) return this.$message.error('用户权限变更失败')
      this.$message.success(data.message)
      this.getUserList()
    },
    // 删除
    async handleDelete (id) {
      const { data } = await deleteuserAPI(id)
      if (data.status !== 0) return this.$message.error(data.message)
      this.$message.success(data.message)
      this.getUserList()
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
    }
  }
}
</script>

<style scoped>
  * {
    font-size: 10px;
  }
  .infotopclass{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  /* 表格图片大小 */
  .cover_img {
    width: 30px;
    height: 30px;
  }
  .el-table {
    border-radius: 8px;
  }
  .el-button {
    border-radius: 8px;
  }
  ::v-deep .el-input__inner{
    height: 2.5em;
    border-radius: 14px;
  }
</style>
